<template>
	<view class="sendVerificationCode-container">
		<view class="header">
			<h1 class="tit">
				验证码已发送至手机
			</h1>
			<text>+86&nbsp;&nbsp;{{loginVO.tel}}</text>
		</view>
		<view class="entry-box">
			<view class="tit">
				<view class="left">
					请输入验证码
				</view>
				<view class="right">
					收不到验证码？
				</view>
			</view>
			<view class="input-box">
				<input type="text" maxlength="1" v-model="code[index]" v-for="(item,index) in code"
					:focus="focusIndex == index" :id="'input-'+index" :key="index" @input="changeFocus" />
			</view>
		</view>
		<view class="footer">
			<text class="remind" v-if="flag">
				<text class="time">
					00:{{time}}
				</text>
				后 重发验证码 或 通过其他途径验证
			</text>
			<text class="getCodeErr" v-if="flag != true">
				<text class="remind">
					还是收不到验证码？请先确认手机是否安装了短信拦截软件或是否欠费停机。若均不是，请再尝试以下方式
				</text>
				<view>
					<view class="left">
						<i class="iconfont icon-icon-test33"></i>
					</view>
					<view class="right" @click="sendAgain">
						重新发送验证码
					</view>
				</view>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginVO: {
					tel: '',
					code: ''
				},
				code: [
					'',
					'',
					'',
					''
				],
				itHasInput: [
					false, false, false, false
				],
				focusIndex: -1,
				flag: true,
				time: 60,
				timer: null,
				studentId: 0
			};
		},
		onLoad(option) {
			console.log(option);
			this.loginVO.tel = option.tel;
			this.timeClick()
		},
		methods: {
			sendCode() {
				this.$myReq({
						url: '/auth/api/sms/' + this.loginVO.tel,
						method: 'GET'
					})
					.then((res) => {
						uni.showToast({
							title: '发送成功',
							image: '../../../static/Icon/login/infoSuccess.png',
							position: 'top'
						})
					})
					.catch((err) => {
						console.log("发送失败", err)
						uni.showToast({
							title: err.message,
							image: '../../../static/Icon/login/infoError.png',
							position: 'top'
						})
					})
			},
			sendAgain() {
				this.$myReq({
						url: '/auth/api/sms/' + this.loginVO.tel,
						method: 'GET'
					})
					.then((res) => {
						uni.showToast({
							title: '已重新发送',
							image: '../../../static/Icon/login/sendSuccess.png',
							position: 'top'
						})
						this.flag = true
						this.time = 60
						this.timeClick()
					})
			},
			changeFocus(e) {
				var index = (e.target.id).replace('input-', '');
				var value = e.detail.value;
				var indexFlag = this.itHasInput[index]
				var flag = false;
				if (index != 0 && value == '' && indexFlag) {
					this.focusIndex = Number(index) - 1
					this.itHasInput[3] = false
					flag = false
				}
				if (value != '') {
					if (index != '3') {
						this.focusIndex = Number(index) + 1
						this.itHasInput[index] = true
					} else {
						this.itHasInput[index] = true
						flag = true
					}
				}
				if (flag) {
					var vcode;
					vcode = this.code.join('')
					console.log(vcode)
					this.loginVO.code = vcode
					// 登录
					this.$myReq({
							url: '/auth/api/login',
							method: 'POST',
							data: this.loginVO
						})
						.then((r) => {
							console.log('登录成功', r);
							uni.showToast({
								title: '登录成功',
								image: '../../../static/Icon/login/registerSuccess.png',
								position: 'top'
							})
							// 跳转至首页
							setTimeout(() => {
								let children = JSON.stringify(r.data.children)
								uni.navigateTo({
									url: '../sendVerificationCode/chooseChild?children=' + children,
								})
							}, 1000)
						})
						.catch((err) => {
							console.log(err)
							uni.showToast({
								title: err.message,
								image: '../../../static/Icon/login/infoError.png',
								position: 'top'
							})
							this.code[0] = ''
							this.code[1] = ''
							this.code[2] = ''
							this.code[3] = ''
						})
				}


			},
			timeClick() {
				this.timer = setInterval(() => {
					var second = Number(this.time)
					second -= 1
					if (second == 0) {
						this.flag = false
						clearTimeout(this.timer)
					}
					if (second >= 10) {
						this.time = second
					} else {
						this.time = '0' + second
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.header {
		padding: 140rpx 70rpx 0rpx 70rpx;
		margin-bottom: 70rpx;

		.tit {
			font-size: 50rpx;
			margin-bottom: 15rpx;
		}

		text {
			color: $main-colorA;
			// font-weight: bold;
			font-size: 40rpx;
		}
	}

	.entry-box {
		// border: 1px solid red;
		padding: 0rpx 70rpx 0rpx 70rpx;

		.tit {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 25rpx;

			.right {
				color: $main-colorC;
			}
		}

		.input-box {
			margin-top: 50rpx;
			// border: 1px solid red;
			height: 100rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			input {
				// border: 1px solid red;
				border-bottom: 1px solid #9c9c9c;
				width: 23%;
				height: 100%;
				font-size: 60rpx;
				text-align: center;
			}
		}
	}

	.footer {
		padding: 40rpx 70rpx 0rpx 70rpx;

		.remind {
			color: #909090;
			font-size: 25rpx;

			.time {
				color: $main-colorB;
			}
		}

		.getCodeErr {
			view {
				display: flex;
				flex-wrap: wrap;
				color: $main-colorA;
				margin-top: 20rpx;

				.left {

					// border: 1px solid black;
					i {
						// border: 1px solid red;
						height: 40rpx;
						line-height: 45rpx;
						font-size: 45rpx;
						margin-right: 20rpx;
					}
				}

				.right {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 35rpx;
					// border: 1px solid blue;
				}

			}
		}
	}
</style>
